<template>
	<div class="home">
		<home-header class="home-header" :city="city"></home-header>
		<home-swiper :swiperList="swiperList"></home-swiper>
		<home-catalog :iconList="iconList"></home-catalog>
		<home-hot
			:hotContentList="hotContentList"
			:hotPriseList="hotPriseList"
			:hotTrendList="hotTrendList"
		></home-hot>
		<home-weekend :weekendList="weekendList"></home-weekend>
		<home-guess :guessList="guessList"></home-guess>
	</div>
</template>

<script>
import axios from 'axios'   //这是axios插件相当于ajax请求
import homeHeader from './components/homeHeader.vue'
import homeSwiper from './components/homeSwiper.vue'
import homeCatalog from './components/homeCatalog.vue'
import homeHot from './components/homeHot.vue'
import homeWeekend from './components/homeWeekend.vue'
import homeGuess from './components/homeGuess.vue'

export default {
  name: 'Home',
  data(){
	  return{
		  city:'',
		  guessList:[],
		  hotContentList:[],
		  hotPriseList:[],
		  hotTrendList:[],
		  iconList:[],
		  swiperList:[],
		  weekendList:[]
	  }
  },
  components:{
  	homeHeader,
	homeSwiper,
	homeCatalog,
	homeHot,
	homeWeekend,
	homeGuess
  },
  methods:{
	  getHomeData(){
		  axios.get("/api/index.json")          //这里就类似ajax请求
			.then(this.getHomeDataSucc)
	  },
	  getHomeDataSucc(res){                         //这是请求数据成功执行的函数
		  // console.log(res)
		  res = res.data
		  if(res.data){
			  const data = res.data
			  // console.log(data)
			  this.city = data.city
			  this.guessList = data.guessList
			  this.hotContentList = data.hotContentList
			  this.hotPriseList= data.hotPriseList
			  this.hotTrendList= data.hotTrendList
			  this.iconList = data.iconList
			  this.swiperList= data.swiperList
			  this.weekendList= data.weekendList
		  }
	  }
  },
  mounted() {
  	this.getHomeData()    //这里是写监听事件，既开始加载页面的时候就执行getHomeData自定义函数，向static/mock/index.json文件发出请求(模拟后端请求)
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
	position:relative
	.home-header
		position:fixed
		top:0
		left:0
		z-index:100
		width:100%
	

</style>
